<template>
  <!-- 时间组件 -->
  <div class="time_box">
    <!-- 星期数输出 -->
    <div>
      <el-row class="week_box">
        <el-col class="week" :span="4">周日</el-col>
        <el-col class="week" :span="3">周一</el-col>
        <el-col class="week" :span="3">周二</el-col>
        <el-col class="week" :span="3">周三</el-col>
        <el-col class="week" :span="3">周四</el-col>
        <el-col class="week" :span="3">周五</el-col>
        <el-col class="week" :span="3">周六</el-col>
      </el-row>
    </div>
    <!-- 时间输出 -->
    <div class="min_box">
      <p>{{ hour }} {{ colon }} {{ minutes }} {{ colon }} {{ seconds }}</p>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            hour: '00',
            colon: ':',
            minutes: '00',
            seconds: '00',
        }
    },
    mounted () {
        const d = new Date()
        document.getElementsByClassName('week')[d.getDay()].style.color = 'green'
    },
    created() {
        this.refreshTime();
    },
    methods: {
        refreshTime () {
            setInterval(() => {
              const date = new Date()
              this.hour =
                date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
              this.minutes =
                date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
              this.seconds =
                date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            }, 1000)
        },
    },
}
</script>

<style lang="less" scoped>
.time_box {
  p {
    text-align: center;
  }
  .week_box {
    font-size: 15px;
    text-align: right;
  }
  .min_box {
    font-size: 24px;
    p {
      text-align: center;
    }
  }
}
</style>
